<template>
    <!-- 支付页面 -->
    <div class="confirmorder-view">
        <base-nav title="确认订单" :showRight="false"></base-nav>
        <!-- 地址 -->
        <van-cell 
        :title="activeAddress[0]? activeAddress[0].name : '选择地址'" 
        :value="activeAddress[0]? activeAddress[0].tel : '' " 
        size="large" 
        :label="activeAddress[0]? activeAddress[0].address : ''"  
        is-link
        @click="Selectaddress"
        />



        <!-- 商品 -->
		<div class="goods-list">
			<van-card
			  v-for="item in settlement"
			  :key="item.goods_id"
			  :num="item.goods_number"
			  :price="item.price"
			  :desc="item.goods_desc"
			  :title="item.goods_name"
			  :thumb="item.goods_thumb"
              class="card"
			/>
		</div>
        <!-- 红包 -->
        <van-cell title="红包" is-link value="0个可用"/>
        <!-- 优惠券列表 -->
            <!-- 优惠券单元格 -->
            <van-coupon-cell
            :coupons="coupons"
            :chosen-coupon="chosenCoupon"
            @click="showList = true"
            />
            <!-- 优惠券列表 -->
            <van-popup
            v-model:show="showList"
            round
            position="bottom"
            style="height: 90%; padding-top: 4px;"
            >
            <van-coupon-list
                :coupons="coupons"
                @change="onChange"
                @exchange="onExchange"
            />
            </van-popup>

        <div class="remark">
            <van-cell title="备注"  value="填写备注" />
        </div>
        <!-- 支付方式 -->
        <div class="puy">
            <p>
                选择支付方式
            </p>
            <div class="zfbwxb">
                <!-- 支付宝 -->
                <div class="zfb">
                <van-cell>
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                    <van-image
                        width="40"
                        height="40"
                        src="http://imgs-qn.iliangcang.com/images/zfbicon.png"
                        />
                </template>
                <template #right-icon>
                    <van-checkbox v-model="zfbchecked " ></van-checkbox>
                </template>
                </van-cell>

                <van-divider :style="{borderColor: '#ccc'}"></van-divider>
            </div>
            </div>
            
             
        </div>
       <!-- 底部提交 -->
        <van-submit-bar button-color="#000" :price="priceALL
        
        " button-text="确认支付"  @click="pay"/>
    </div>

</template>
<script setup lang="ts">
    import { onMounted, ref } from 'vue';
    import { useUserStore } from './../store';
    import API from './../api';

    let userStore = useUserStore();	
    // 结算清单
    let settlement = ref([]);
    // 地址
    let activeAddress = ref([]);

    // 优惠价格
    let Preferential = ref(0);

    let router = useRouter();
    // 选择支付方式s
    let zfbchecked = ref(false);
    // 展示优惠价
    let showList = ref(false);
    const chosenCoupon = ref(-1);

    // 优惠券
    // const coupon = {
    //   available: 1,
    //   condition: '无门槛\n最多优惠88元',
    //   reason: '',
    //   value: 88*100,
    //   name: '不要998不要888只要88',
    //   startAt: 1489104000,
    //   endAt: 1514592000,
    //   valueDesc: '88',
    //   unitDesc: '元',
    // };
    // const coupons = ref([coupon]);
    // const onChange = (index) => {
    //   showList.value = false;
    //   chosenCoupon.value = index;
    //   Preferential.value = coupon.value;
           
    // };
    // const onExchange = (code) => {
    //   coupons.value.push(coupon);
    // };


    // 钩子函数
    onMounted(async () => {
        // 请求结算清单
        settlement.value = await API.getSettlementData('/api_settlement',{
            status : 'getsettlement',
			userId : userStore.TOKEN
        });
        // 请求地址
        let even = await API.getAddressData('/api_address',{
            status:'getAddress',
            userId:userStore.TOKEN
        });
        
        
        // 显示被选中的地址或者默认地址
        even.some(item => {
            // 有已选中的地址拿选择的没有已选择拿默认
            if(item.isActive){
                console.log("111");
                
                activeAddress.value=[{
                        id: item.address_id,
						name: item.takename,
						tel: item.tel,
						address: item.province + item.city + item.district + item.streetname,
						isDefault: item.isDefault,
						isActive: item.isActive,
                }]
                return true;
            };
            
            if(!item.isActive && item.isDefault){
              
                activeAddress.value=[{
                        id: item.address_id,
						name: item.takename,
						tel: item.tel,
						address: item.province + item.city + item.district + item.streetname,
						isDefault: item.isDefault,
						isActive: item.isActive,
                }]
            };
        });

    });
    // 选择地址
    let Selectaddress = ()=>{
        router.push('/address');
    };
    // 总价
    let priceALL = computed(()=>{
        let all = 0;
        settlement.value.forEach(item => {
		    all += item.price * parseInt(item.goods_number);
         });

        return all * 100;
    });
    
    let fPrice = priceALL.value - Preferential.value;

    // 点击支付
    let pay = async() =>{
        // console.log(fPrice);
        if(!zfbchecked.value){
            showFailToast('未选择支付方式');
            return;
        }
        // 支付请求
        let even = await API.payData('/api_payment',{
            userId : userStore.TOKEN,
            orderId : new Date().getTime(),
            returnUrl: 'http://localhost:921/#/index/order',
            totalAmount: (priceALL.value - Preferential.value) / 100,
            subject: '订单标题',
            body: '订单详情'
        });
        // 提示未选择地址
        if(even.code == 3003){
            showFailToast('未选择收货地址');
            return;
        };
        

        console.log(even);
        // 跳转支付
        location.href = even;
        
    };
</script>
<style scoped lang="less">
    // 设置底部
    .van-submit-bar{
        bottom: 0px !important;
    }
    // 设置商品卡牌宽度
    .card{
        width: 100%;
        
    }
    // 容器高度
    .confirmorder-view{
        width: 100%;
        height: 100%;
        background-color: #F1F1F1;
    }
    // 备注
    .remark{
        margin-top: 20px;
    }
    // 选择支付方式
    .puy{
        height: 50%;
       
        margin-top: 30px;
        p{
            padding: 10px;
        }
        .zfb{
           
            background: white;
        }
        .zfbwxb{
            background: white;
            height: 80%;
        }
    }

</style>
